<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0">
	-->
	<meta name="author" content="liuyubobobo">
	<link rel="shortcut icon" href="#">

	<title>limao 李貌</title>

	<link href="http://www.liuyubobobo.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://www.liuyubobobo.com/css/liuyubobobo.css?001" rel="stylesheet">

	<script src="http://www.liuyubobobo.com/bootstrap/js/bootstrap.min.js" type="text/javascript" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

	<link href="http://www.liuyubobobo.com/css/index.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
	ul{
		list-style: none;
	}
	.da-thumbs{
		width: 500px;
		height: 100px;
		list-style: none outside none;
		height: 118px;
		position: relative;
		margin: 20px 0px 25px 200px;
		padding: 0px;
		font: 14px/22px "微软雅黑","宋体",Arial;
		word-wrap: break-word;
		/*position: absolute;*/
	}
	.da-thumbs li.last{
		margin-right: 0;
	}
	.da-thumbs li{
		width: 113px;
		height: 113px;
		float: left;
		margin-right: 8px;
		margin-top: 10px;
		background: none repeat scroll 0% 0% #FFF;
		position: relative;
		border: 2px solid #FAFAFA;
	}
	.da-thumbs li a {
		color: #FFF;
		overflow: hidden;
		display: block;
		position: relative;
	}
	.da-thumbs li a h2{
		font-size: 24px;
		height: 24px;
		line-height: 24px;
		margin: 10px 8px 8px;
		font-weight: normal;
		text-align: center;
		overflow: hidden;
	}
	.da-thumbs li a img {
	display: block;
	position: relative;
	}
	.da-thumbs li a em{
		display: block;
		width: 100px;
		height: 5px;
		background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.3);
		margin: 0px 6px;
	}
	.da-thumbs li a div{
		position: absolute;
		background: none repeat scroll 0% 0% rgba(1, 152, 117, 0.9);
		width: 100%;
		height: 100%;
	}
	.da-thumbs li a div p{
		font-size: 12px;
		margin: 6px 8px;
		line-height: 18px;
	}
	</style>
	<script type="text/javascript">
	///////////////////////////////////////
	// 判断鼠标进入出去方向效果
	$(function(){

	$("#da-thumbs li").bind("mouseenter mouseleave",
		function(e) {
			var w = $(this).width();
			var h = $(this).height();
			var x = (e.pageX - $(this).offset().left - (w / 2)) * (w > h ? (h / w) : 1);
			var y = (e.pageY - $(this).offset().top - (h / 2)) * (h > w ? (w / h) : 1);
			var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
			var eventType = e.type;
			var dirName = new Array('上方', '右侧', '下方', '左侧');
			var hot_info = $(this).find('a .hot_info');
			if (e.type == 'mouseenter') {
				if (direction == 0) {
					hot_info.css({
						'top': -118,
						'left': 0
					})
				} else if (direction == 1) {
					hot_info.css({
						'top': 0,
						'left': 118
					})
				} else if (direction == 2) {
					hot_info.css({
						'top': 118,
						'left': 0
					})
				} else {
					hot_info.css({
						'top': 0,
						'left': -118
					})
				}

				hot_info.stop().animate({
					'top': 0,
					'left': 0
				}, 200);
			} else {
				if (direction == 0) {
					hot_info.stop().animate({
						'top': -118,
						'left': 0
					}, 200)
				} else if (direction == 1) {
					hot_info.stop().animate({
						'top': 0,
						'left': 118
					}, 200)
				} else if (direction == 2) {
					hot_info.stop().animate({
						'top': 118,
						'left': 0
					}, 200)
				} else {
					hot_info.stop().animate({
						'top': 0,
						'left': -118
					}, 200)
				}
			}
		});
	})
	///////////////////////////////////////
	</script>
</head>
<body>
	<!-- Fixed navbar -->
	<header>
		<div class="navbar navnavbar-fixed-top navbar-inverse" role="navigation" style="background-color:#09c;border-color:#69c;border-radius:0;">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="" style="color:white;">
						<img src="./img/limao.bmp" class="img-circle" style="width:80px;height:80px;"/>
					</a>
				</div>
				<div class="navbar-collapse collapse cnfont letterspacing1">
					<ul class="nav navbar-nav pull-left">
						<li>
							<a href="" id="main-a">limao 李貌</a>
						</li>
					</ul>
					<ul class="nav navbar-nav pull-right" id="en-nav">
						<li id="home-li" class="selected-home-li" >
							<a href="">Home</a>
						</li>
						<li id="ios-li"  >
							<a href="./html/menu.html" target="_blank">HTML</a>
						</li>
						<li id="html5-li"  >
							<a href="" target="_blank">Play JS</a>
						</li>
						<li id="design-li"  >
							<a href="" target="_blank">PHP</a>
						</li>
						<li id="other-li"  >
							<a href="" target="_blank">Designs</a>
						</li>
						<li id="about-li">
							<a href="./YEP3.0/index.php">Yep框架</a>
						</li>

					</ul>
				</div>
				<!--nav-collapse end-->
			</div>
			<!--container end-->
		</div>
		<!--navbar end-->

	</header>
	<div class="container">
		<div class="col-xs-4">
			<div id="intro-panel">
				<h1 id="site-owner"> <b>李貌。</b>
				</h1>
				<p>PHP技术爱好者，从业者，持续学习者。</p>
				<p>
					对技术开发、产品设计、多媒体交互有浓厚的兴趣；对不同的程序设计语言，前端后端服务器，可编程硬件有浓厚兴趣；对电影音乐游戏，各种形式的艺术表现有浓厚的兴趣；对数学物理学宇宙学心理学历史政治社会人文有浓厚的兴趣。对什么都有浓厚的兴趣，所以什么都看，什么都不精。但不以为耻，反以为荣。梦想成为杂家，长命百岁，然后了解这个神秘的世界。
				</p>
				<p>
					大专就读于河北工业职业技术学院自动化系。毕业后，从事PLC工作两年。开始用下班时间，学习用wordpress建站，运营；学习C语言算法。13年初，辞掉稳定的工作，参加
					<a href="">后盾网培训</a>
					课程，深入学习PHP技术。走上兴趣之路，前端设计，网页游戏制作，各种管理系统开发。
				</p>
				<p>希望和各路高手成为朋友：）</p>
			</div>
			<div id="contact-me">
				<h3>如何联系我？</h3>
				<div class="contact-div">
					<img src="./img/weixin.png" class="contact-img" />
					<p>李貌 的微信</p>
					<p>最常使用的社交工具，</p>
				</div>
				<div class="contact-div">
					<img src="./img/zhihu.jpg" class="contact-img" />
					<a href="http://www.zhihu.com/people/li-mao-87" target="_blank">李貌 在知乎</a>
					<p>正在筹划能否在知乎开辟相关专题。希望更多朋友和我交流各种问题：）</p>
				</div>
				<div class="contact-div">
					<img src="./img/weibo.jpg" class="contact-img" />
					<a href="http://weibo.com/u/1977452267" target="_blank">李貌 在微博</a>
					<p>不常用微博，但还会去看看，正在思考利用微博发布更多有意思的东东：）</p>
				</div>
				<br>
				<br>
				<h4>我的微信公众账号：</h4>
				<img src="./img/gongzhong.jpg" height="180" alt=""></div>
		</div>

		<div class="col-xs-8" style="padding-left:50px;">

			<!--ios dev-->
			<div class="index-box">
				<img src="./img/web.jpg" height="466" width="600" class="index-img-left pull-left"/>
				<div class="page-header">
					<h2>
						WEB Development
						<small>PHP编程</small>
					</2>
				</div>
				<div class="content">
					多半年网站开发经验，在后盾积累了知识后，写有自己的框架，和主流网站系统。擅长HD框架，懂MVC开发思想，会使用静态，异步，提高网站加载速度。
				</div>
<!-- 				<div class="pull-right" style="margin-top:15px;margin-right:30px;">
					<a href=""><img src="" class="index-apps-icon"/></a>
					<img src="" class="index-apps-icon"/>
					<img src="" class="index-apps-icon"/>
					<img src="" class="index-apps-icon"/>
					<img src="" class="index-apps-icon"/>
					<img src="" class="index-apps-icon"/>
					<img src="http://www.liuyubobobo.com/sub-mobileapps/img/japanesepro.png" class="index-apps-icon"/>
					<img src="http://www.liuyubobobo.com/sub-mobileapps/img/gongwuyuanpro.png" class="index-apps-icon"/>
					<img src="http://www.liuyubobobo.com/sub-mobileapps/img/dianzibilite.png" class="index-apps-icon"/>
				</div> -->
				<!-- 留言板 许愿墙 FMS文件管理系统 WENDA CMS LAGOU Yep框架 --> 
				<ul id="da-thumbs" class='da-thumbs'>
					<li>
						<a href="./message_board/index.php" target="_blank">
							<img src="./img/thumb1.png" alt="留言板" height="113" width="113">
							<div class="hot_info">
								<h2 title="留言板">留言板</h2> <em></em>
								<p title="仿爱偷闲发布说说的功能">伪数据库制作仿爱偷闲发布说说的功能</p>
							</div>
						</a>
					</li>
					<li>
						<a href="./FMS/index.php" target="_blank">
							<img src="./img/thumb2.png" title="FMS文件管理系统" height="113" width="113">
							<div class="hot_info">
								<h2 title="FMS文件管理系统">FMS</h2> <em></em>
								<p title="功能齐全的文件管理平台">功能齐全的文件管理平台</p>
							</div>
						</a>
					</li>
					<li>
						<a href="./ImageTool/index.html" target="_blank">
							<img src="./img/thumb3.png" alt="图像" height="113" width="113">
							<div class="hot_info">
								<h2 title="图像">图像</h2>
								<em></em>
								<p title="位置，文字，水印，裁剪，压缩，拉伸">位置,文字,水印,裁剪,最佳缩略图，一个不少</p>
							</div>
						</a>
					</li>
					<li>
						<a href="./Wish" target="_blank">
							<img src="./img/thumb4.png" alt="许愿墙1" height="113" width="113">
							<div class="hot_info">
								<h2 title="许愿墙1">许愿墙1</h2>
								<em></em>
								<p title="这是yep框架萌芽时期写出的许愿墙功能。">这是yep框架萌芽时期写出的许愿墙功能。</p>
							</div>
						</a>
					</li>
					<li>
						<a href="./Wish2" target="_blank">
							<img src="./img/thumb5.png" alt="许愿墙2" height="113" width="113">
							<div class="hot_info">
								<h2 title="许愿墙2">许愿墙2</h2>
								<em></em>
								<p title="这是许愿墙第2种样式">这是许愿墙第2种样式</p>
							</div>
						</a>
					</li>
					<li>
						<a href="./__WENDA" target="_blank">
							<img src="./img/thumb6.png" alt="360问答" height="113" width="113">
							<div class="hot_info">
								<h2 title="360问答">360问答</h2>
								<em></em>
								<p title="基于自己的Yep框架3">基于自己的Yep框架3.0。这是一个知识平台。</p>
							</div>
						</a>
					</li>
					<li>
						<a href="./__CMS" target="_blank">
							<img src="./img/thumb7.png" alt="CMS系统" height="113" width="113">
							<div class="hot_info">
								<h2 title="CMS系统">CMS</h2>
								<em></em>
								<p title="完整可用,CMS系统,基于HD框架。自带仿设计达人模板">完整的CMS系统,基于HD框架.自带仿设计达人模板</p>
							</div>
						</a>
					</li>
					<li class="last">
						<a href="./__HOOK" target="_blank">
							<img src="./img/thumb8.png" alt="招聘系统" height="113" width="113">
							<div class="hot_info">
								<h2 title="招聘系统">招聘系统</h2>
								<em></em>
								<p title="成熟可用的招聘系统,仿拉勾,基于HD框架,开发中">成熟可用的招聘系统,仿拉勾,基于HD框架,开发中</p>
							</div>
						</a>
					</li>
				</ul>
				<div class="clearfix"></div>
				<a class="pull-right btn btn-primary" href="" target="_blank" style="margin-top:20px;margin-right:30px;" class="letterspacing2 fontsize16">更多我的 WEB 站点</a>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
			<hr/>

			<!--html dev-->
			<div class="index-box" style="margin-top:60px;">
				<img src="./img/html.png" height="256" width="256" class="index-img-right pull-right"/>
				<div class="page-header">
					<h2>
						HTML
						<small>HTML仿站</small>
					</2>
				</div>
				<div class="content">
					从html到HTML5，从css到css3到less。还有bootstrap，jquery,hdjs。所见过的所有html设计，我都试写过，而且会选择最适合的方式来写。喜欢追求代码复合，实用，以及封装。喜欢用各种插件工具提高编程效率。
				</div>
				<a class="pull-left btn btn-primary" href="" target="_blank" style="margin-top:20px;" class="letterspacing2 fontsize16">更多我的HTML仿站</a>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
			<hr/>

			<!--designs-->
			<div class="index-box" style="margin-top:60px;">
				<img src="./img/effect.png" height="150" class="index-img-left pull-left" style="width:280px;"/>
				<div class="page-header">
					<h2>
						Play JS
						<small>动态效果秀</small>
					</2>
				</div>
				<div class="content">
					jquery 确实让 js 的开发更易表达，
			而 html5 也让 html 更显强大。
			我对动态效果的实现比较痴迷，
			为了追求尝试一些更加绚丽效果的网站。会一直关注并学习着。
					<br>待我 HTML5 作品多了，再开一个 HTML5 专题</div>
				<a class="pull-left btn btn-primary" href="" target="_blank" style="margin-top:20px;" class="letterspacing2 fontsize16">更多我的JS实验</a>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
			<hr/>
			<div class="index-box" style="margin-top:60px;">
				<img src="./img/naodong.png" height="171" width="280" class="index-img-right pull-right" style="height:171px;"/>
				<div class="page-header">
					<h2>
						Designs
						<small>我的设计</small>
					</2>
				</div>
				<div class="content">
					没有专业学过设计，但对Web设计和Web前端有着强烈的兴趣。热爱研究UI，也经常研究UI。喜好将脑洞大开时想到的游戏给设计出来。
				</div>
				<a class="pull-left btn btn-primary" href="" target="_blank" style="margin-top:20px;" class="letterspacing2 fontsize16">更多我的设计</a>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
			<hr/>
			<!--designs-->
			<div class="index-box" style="margin-top:60px;">
				<img src="./img/yep.jpg" height="150" class="index-img-left pull-left" style="width:280px;"/>
				<div class="page-header">
					<h2>
						Yep框架
						<small>我的php框架</small>
					</2>
				</div>
				<div class="content">
				这是我尝试着写的php开发框架，指导老师：马振宇。从无到有，到强大。一路走来，能写出它，让我成长了不少。感谢导师。</div>
				<a class="pull-left btn btn-primary" href="" target="_blank" style="margin-top:20px;" class="letterspacing2 fontsize16">前往下载</a>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
			<hr/>
		</div>
		<div class="clearfix"></div>
	</div>

	<div class="container">
		<div class="pull-right content fontsize14 letterspacing1" style="padding-bottom:30px;margin-right:15px;">
			<a href="">c39_limao.houdunphp.com</a>
			&nbsp;&nbsp;|&nbsp;&nbsp;京ICP备11022004号&nbsp;&nbsp;|&nbsp;&nbsp;主机：&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="http://www.houdunphp.com">后盾网</a>
		</div>
	</div>
</body>
</html>